<template>
  <div class="fengqiangfu">
      <div class="fqt">
          <span>{{title}}</span>
          <span>{{time}}</span>
          <span>{{status}}</span>
      </div>
      <div class="fqb" v-if="id===1">
          <Fengqiangzi v-for="v in data" :key="v.id" :imgurl="v.imgurl" :text="v.text"/>
      </div>
     <div class="fqb" v-else>
          <Fengqiangzi v-for="v in data2" :key="v.id" :imgurl="v.imgurl" :text="v.text"/>
      </div>
  </div>
</template>

<script>
import Fengqiangzi from "./fengqiangzi.vue"
export default {
    data(){
        return{
            data:[
                {id:1, imgurl:"tqtj/fq1.jpg",text:"¥40.05"},
                {id:2,imgurl:"tqtj/fq2.jpg",text:"¥27.77"},
                {id:3,imgurl:"tqtj/fq3.jpg",text:"¥28.61"},
                {id:4,imgurl:"tqtj/fq4.jpg",text:"¥307.77"}
            ],
             data2:[
                {id:1, imgurl:"tqtj/kj1.jpg",text:"最低¥179"},
                {id:2,imgurl:"tqtj/kj2.jpg",text:"最低¥35"},
                {id:3,imgurl:"tqtj/kj3.jpg",text:"最低¥19.9"},
                {id:4,imgurl:"tqtj/kj4.jpg",text:"最低¥109"}
            ]
    }},
    props:["title","time","status","id"],
    components:{
        Fengqiangzi
    }
}
</script>

<style lang="scss">
    .fengqiangfu{
        width: 3.55rem;
        padding: .1rem;
        background-color: #fff;
        .fqt{
            width: 100%;
            height: .28rem;
            line-height: .28rem;
            span:nth-child(1){
                font-size: .2rem;
                font-weight: bold;
                margin-right: .05rem;
            }
            span:nth-child(2){
                line-height: .2rem;
                font-size: .12rem;
                background-color: #fff;
                display: inline-block;
                border-radius: 12px 0 12px 0;
                color: #fff;
                background-color: #000;
            }
            span:nth-child(3){
                font-size: .12rem;
                line-height: .2rem;
                color: white;
                background: linear-gradient(rgb(247, 138, 159), rgb(254, 154, 139));
                display: inline-block;
                border-radius: 0 0 12px 0;
            }
        }
        .fqb{
            margin-top: .1rem;
            display: flex;
            justify-content: space-between;
        }
    }
</style>